    <style include="settings-shared passwords-shared">
      #originUrl {
        /* The following non-flex directives allow eliding long originUrls from
         * the left. Forcing rtl should not cause an issue for right-to-left
         * languages in this case, since valid URL characters are restricted to
         * ASCII.
         */
         direction: rtl;
         display: flex;
      }

      #username,
      #password {
        color: inherit;
        font-size: inherit;
        line-height: inherit;
      }

      #username {
        font-family: inherit;
      }

      #username,
      #password:not([type='password']) {
        text-overflow: ellipsis;
      }
    </style>
    <div class="list-item" focus-row-container>
      <slot name="checkbox"></slot>
      <div class="website-column no-min-width">
        <site-favicon url="[[entry.urls.link]]"></site-favicon>
        <a id="originUrl" target="_blank" class="no-min-width"
            href="[[entry.urls.link]]"
            focus-row-control focus-type="originUrl">
          <span class="text-elide">
            <!-- This bdo tag is necessary to fix the display of domains
              starting with numbers. -->
            <bdo dir="ltr">[[entry.urls.shown]]</bdo>
          </span>
        </a>
      </div>
      <input id="username" class="username-column password-field"
          aria-label="$i18n{editPasswordUsernameLabel}"
          readonly value="[[entry.username]]" title="[[entry.username]]"
          focus-row-control focus-type="username">
      <div class="password-column">
        <template is="dom-if" if="[[!entry.federationText]]">
          <input id="password" aria-label=$i18n{editPasswordPasswordLabel}
              type="[[getPasswordInputType(entry.password)]]"
              class="password-field password-input" readonly
              disabled$="[[!entry.password]]" on-click="onReadonlyInputTap_"
              value="[[getPassword(entry.password)]]"
              focus-row-control focus-type="passwordField">
          <cr-icon-button id="showPasswordButton"
              class$="[[getIconClass(entry.password)]]"
              on-click="onShowPasswordButtonTap"
              title="[[showPasswordTitle(entry.password,
                  '$i18nPolymer{hidePassword}',
                  '$i18nPolymer{showPassword}')]]"
              focus-row-control focus-type="showPassword"
              aria-label$="[[getShowButtonLabel(entry.password)]]">
          </cr-icon-button>
        </template>
        <span class="password-field text-elide" id="federated"
            hidden$="[[!entry.federationText]]">
          [[entry.federationText]]
        </span>
      </div>
      <cr-icon-button class="icon-more-vert" id="moreActionsButton"
          hidden$="[[shouldHideMoreActionsButton]]"
          on-click="onPasswordMoreActionsButtonTap_" title="$i18n{moreActions}"
          focus-row-control focus-type="moreActionsButton"
          aria-label$="[[getMoreActionsLabel_(entry)]]"></cr-icon-button>
    </div>
